  $light-gray-1: #eeeceb;
  $light-gray-2: #e1dedc;
  $light-gray-3: #c8c5c2;
  $med-gray: #959595;
  $dark-gray: #58585b;

#side-container {
  flex-direction: column;
  display: flex;
  font-size: 12px;
  margin-top: 5px;
}

  #sidebar-container {
    -webkit-user-select: none;
    visibility: hidden;
    position: relative;
    width: 10px;
    margin-top: 55px;
    flex: 1;
    overflow-y: auto;
  }

  #sidebar-container.expanded{
    display: flex;
    flex-direction: column;
    width:120px;
    visibility: visible;
    min-width: 120px;
  }


  #sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .runfile {
    position: absolute;
    margin-left: -30px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #38B449;
    top: 4px;
    display: none;
    cursor: pointer;
    opacity: .4;
  }

  .runfile.mainfile {
    opacity: 1;
    display: block;
  }

  #sidebar-drag {
    flex: none;
    cursor: col-resize;
    background-color: none;
    position: absolute;
    width: 7px;
    height: 100%;
    right: 0;
    top: 0;
  }



  #filetree {
    overflow-x: auto;
    flex: 1;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin: 0;
        padding: 0;
        position: relative;

        div {
          padding: 3px;
          padding-left:30px;
          cursor: pointer;
          color: #b5b5b5;
          min-width: 60px;
        }

        div.selected {
          background-color: rgba(153, 153, 153, 0.1);
        }

        ul li {
          div {
            padding-left: 46px;

          }

          ul li {
            div {
              padding-left: 106px;
            }

            ul li {
              div {
                padding-left: 127px;
              }
            }
          }
        }
      }
    }

    .toggle {
      top: 1px;
      margin-left: -23px;
      position: absolute;
      width: 24px;
      margin-top: -3px;
      height: 24px;
      opacity: 0.4;


      &.open {
        background-image: url('../images/expanded.svg');
      }

      &.closed {
        background-image: url('../images/collapsed.svg');
      }
    }

    .icon {
      width: 9px;
      height: 12px;
      position: absolute;
      top: 4px;
      margin-left: -15px;
      background-size: 9px auto;
      background-repeat: no-repeat;
      opacity: 0.5;
    }

    .icon.file {
      background-image: url('../images/file1.svg');
    }

    .icon.db {
      background-image: url('../images/database.svg');
    }

    .icon.folder {
      background-image: url('../images/folder.svg');
      background-size: 12px auto;
      top: 5px;
      margin-left: -22px;
      width: 12px;
      height: 12px;
    }

    .icon.image {
      background-image: url('../images/image.svg');
    }
  }
